<template>
  <div class="w-full h-full">
    <VueFlow :nodes="nodes">
      <Panel>
        <button type="button" @click="addNode">Add a node</button> |
        <button type="button" @click="removeNode('1')">Remove Node 1</button> |
        <button type="button" @click="onUpdateNode('1')">Update Node 1</button> |
      </Panel>
    </VueFlow>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue'
  import type { Node } from '@vue-flow/core'
  import { VueFlow, Panel, useVueFlow } from '@vue-flow/core'
  const { getNodes, onPaneReady, updateNode } = useVueFlow()
  const nodes = ref<Node[]>([
    {
      id: '1',
      position: { x: 50, y: 50 },
      data: { label: 'Node 1' },
    },
  ])

  function addNode() {
    const id = Date.now().toString()

    nodes.value.push({
      id,
      position: { x: 150, y: 50 },
      data: { label: `Node ${id}` },
    })
  }
  function removeNode(id) {
    nodes.value = nodes.value.filter((node) => node.id !== id)
  }
  function onUpdateNode(id) {
    updateNode(id, { data: { label: '嘎嘎嘎' }, style: { background: 'red' } })
  }

  // event handler
  onPaneReady((i) => i.fitView())

  // watch the stored nodes
  watch(getNodes, (nodes) => console.log('nodes changed', nodes))
</script>
